/*
 * @Author: yangrongxin
 * @Date: 2021-08-20 16:57:24
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-12-28 09:41:29
 */
import { Component } from 'react';
import F2Canvas from '@/components/F2Component';

import { Chart } from '@antv/f2/lib/core';

import '@antv/f2/lib/animation/animate'; // 引入动画插件
import '@antv/f2/lib/geom/interval';
import '@antv/f2/lib/geom/adjust/dodge';
import '@antv/f2/lib/geom/line'; // 加载折线图

import Tooltip from '@antv/f2/lib/plugin/tooltip';
import Guide from '@antv/f2/lib/plugin/guide';
import Legend from '@antv/f2/lib/plugin/legend';

export default class BarChart extends Component<any, any> {
  onInit = (config) => {
    /* chartData 绘制图表的数据 包含当前的辅助线数据
     * {
      name: 'xxx', 当前对应的维度名称
      user: '', // 当前对应的是用户得分还是 最大参考值 或者最小参考值
      score: '' // 当前对应的分数
     }
     */
    const { chartData = [], userDataName = '你的分数' } = this.props;

    console.log('BarChartData', chartData);

    Chart.plugins.register([Tooltip, Guide, Legend]);

    const chart = new Chart(config);

    // 获取绘图的最大值和最小值
    const maxCount =
      Math.max.apply(
        null,
        chartData.map((item: any) => item.userMaxScore),
      ) || 100;
    const minCount =
      Math.min.apply(
        null,
        chartData.map((item: any) => item.userMinScore),
      ) || 0;

    const getRealVal = (val: number) => (Number.isFinite(Math.abs(val)) ? val : 0);

    const maxValue: number = getRealVal(maxCount);
    const minValue: number = getRealVal(minCount);

    // name -> user  year => item sales => score
    chart.source(chartData, {
      score: {
        min: minValue,
        max: maxValue,
        tickCount: 5,
      },
      userMinScore: {
        min: minValue,
        max: maxValue,
        tickCount: 5,
      },
      userMaxScore: {
        min: minValue,
        max: maxValue,
        tickCount: 5,
      },
    });
    chart.tooltip({
      showItemMarker: false,
      // 点击的时候 展示对应的 tooTip提示框
      onShow: function onShow(ev) {
        // eslint-disable-next-line prefer-destructuring
        const items = ev.items;
        items[0].name = null;
        items[0].name = items[0].title;
        // eslint-disable-next-line prefer-template
        // 使用字符串拼接对应的展示值
        // items[0].value = '¥' + items[0].value;
      },
    });
    // x 轴展示的配置
    chart.axis('item', {
      label: {
        rotate: -Math.PI / 5,
        textAlign: 'end',
        textBaseline: 'middle',
        fontSize: 10,
      },
    });
    chartData.forEach(function (obj) {
      chart.guide().text({
        position: [obj.item, obj.score],
        content: obj.score,
        style: {
          textBaseline: 'bottom',
          textAlign: 'center',
        },
        offsetY: -2,
      });
    });
    // 增加对应的图例
    chart.legend({
      custom: true,
      position: 'top',
      items: [
        { name: userDataName, marker: 'circle', fill: 'blue' },
        { name: '参考值(最大)', marker: 'circle', fill: 'green' },
        { name: '参考值(最小)', marker: 'circle', fill: 'red' },
      ],
    });
    // 绘制柱状图的内容
    chart.interval().position('item*score').color('blue').adjust({
      type: 'dodge',
      marginRatio: 0.05, // 设置分组间柱子的间距
    });
    // 绘制分别两条折线图
    chart.line().position('item*userMaxScore').color('green');
    chart.line().position('item*userMinScore').color('red');
    chart.render();
    return chart;
  };

  render() {
    return <F2Canvas onInit={this.onInit.bind(this)} />;
  }
}
